<div class="back-pic">
  <div fxLayout="column" (submit)="login()">
    <h1 fxFlexAlign="center" fxFlexOffset.gt-xs="10" fxFlexOffset.lt-sm="20">登录页</h1>
    <form [formGroup]="loginForm">
      <div fxLayoutAlign="center">
        <mat-form-field  fxFlex.lt-sm="60" fxFlex.gt-xs="20">
          <input formControlName="username" matInput placeholder="账号" type="text">
          <mat-icon matSuffix>account_circle</mat-icon>
          <mat-error *ngIf="username.invalid">账号不能为空</mat-error>
        </mat-form-field>
      </div>

      <div fxLayoutAlign="center">
        <mat-form-field  fxFlex.lt-sm="60" fxFlex.gt-xs="20">
          <input formControlName="password" matInput placeholder="密码" [type]="hidePassword ? 'password' : 'text'">
          <mat-icon matSuffix (click)="hidePassword = !hidePassword">{{hidePassword ? 'visibility' : 'visibility_off'}}</mat-icon>
          <mat-error *ngIf="password.invalid">密码不能为空</mat-error>
        </mat-form-field>
      </div>
      <div fxLayoutAlign="center">
        <mat-checkbox color="primary"  fxFlex.lt-sm="60" fxFlex.gt-xs="20" (change)="setRememberValue($event.checked)">记住我</mat-checkbox>
      </div>
      <div fxLayoutAlign="center">
        <button type="submit" mat-raised-button color="primary">登 录</button>
      </div>
    </form>
  </div>
</div>




<!--
{{loginForm.value | json}}<br/>
{{loginForm.invalid}}
-->
